<template>
	<div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">专家组成员配置</div>
				<div>
					<!-- <el-button v-if="isBtn" type="primary" round @click="dialogVisible = true">添加成员</el-button> -->
					<el-button type="primary" round @click="dialogVisible = true">添加成员</el-button>
					<!-- <el-button type="primary" size="mini" class="topButton" round>置顶</el-button> -->
					<!-- <el-button type="primary" size="mini" class="topButton" round>新增</el-button> -->
				</div>
			</div>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="name" label="姓名"></el-table-column>
			<el-table-column prop="jobNumber" label="工号"></el-table-column>
			<el-table-column prop="attestation" label="平台认证"></el-table-column>
			<el-table-column prop="companyName" label="主管团队及部门"></el-table-column>
			<el-table-column prop="postName" label="职务">
				<template slot-scope="scope">
					{{ scope.row.postName?scope.row.postName:'暂无职务' }}
				</template>
			</el-table-column>
			<el-table-column prop="rankName" label="职级">
				<template slot-scope="scope">
					{{ scope.row.rankName?scope.row.rankName:'暂无职级' }}
				</template>
			</el-table-column>
			<el-table-column prop="major" label="岗位">
				<template slot-scope="scope">
					{{ scope.row.major?scope.row.major:'暂无岗位' }}
				</template>
			</el-table-column>
			<el-table-column prop="zj" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="mini" @click="deleteMenbers(scope.row)">移除成员</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
		<!-- 新增专家组 -->
		<el-dialog title="选择专家" :visible.sync="dialogVisible" width="800px">
			<el-table ref="multipleTable" :data="menbersList.items" tooltip-effect="dark" style="width: 100%"  @select="rowSelect" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="phone" label="电话"></el-table-column>
				<el-table-column prop="mainCompany" label="主团队"></el-table-column>
				<el-table-column prop="departmentName" label="部门">
					<template slot-scope="scope">
						{{ scope.row.departmentName?scope.row.departmentName:'暂无部门' }}
					</template>
				</el-table-column>
				<el-table-column prop="dutiesName" label="职务">
					<template slot-scope="scope">
						{{ scope.row.dutiesName?scope.row.dutiesName:'暂无职务' }}
					</template>
				</el-table-column>
			</el-table>
			<pagina-tion :totalNum="menbersList.totalNum" @paginaClick="dialogTableDataPaginaClick"></pagina-tion>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="confirmAdd">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: ['isBtn'],
		data() {
			return {
				companyId: '',
				tableData: [],
				pageData: '',
				queryData: {
					expertGroupId: '',
					page: 1,
					pageSize: $globalData.pageSize
				},
				// 弹窗
				dialogVisible: false,
				menbersList: '' ,// 专家列表
				dialogSelectData: new Map(), // 记录表格已选择的数据
				
			}
		},
		mounted() {
			// this.getMenbersList()
			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId
		},
		watch:{
			dialogVisible(newdata){
				if(newdata){
					this.getCompanyMenbers(1)
				} else {
					this.dialogSelectData.clear()
				}
			}
		},
		methods: {
			paginaClick(val) {
				this.queryData.page = val
				this.getMenbersList()
			},
			getMenbersList(id) {
				// 获取专家组成员
				// this.queryData.expertGroupId = id
				this.$request.get(this.$api.queryExpertMember, this.queryData).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						this.tableData = res.data.items
					}
				})
			},
			dialogTableDataPaginaClick(val){
				this.getCompanyMenbers(val)
			},
			confirmAdd(){
				// 确定添加成员
				// console.log(this.dialogSelectData)
				let userIds = []
				this.dialogSelectData.forEach((value, key)=>{
					userIds.push(key)
				})
				// console.log(userIds.join(','))
				setTimeout(()=>{
					this.$request.get(this.$api.saveMembers,{
						userId: userIds.join(','),
						expertId: this.$route.params.id?this.$route.params.id:this.queryData.expertGroupId
					}).then(res=>{
						if(res.code == 200){
							this.dialogVisible = false
							this.$message.success('添加成功')
							this.getCompanyMenbers(1)
							if(this.$route.params.id){
								this.$parent.getMangmentUserList()
							} else {
								this.$parent.$refs.specialistGroupList.getExpertGroupList()
							}
						}
					})
				},100)
				
			},
			getCompanyMenbers(page) {
				// 获取专家列表
				this.$request.postForm(this.$api.queryExpertNotInGroup, {
					companyId: this.companyId,
					groupId: this.$route.params.id?this.$route.params.id:this.queryData.expertGroupId,
					page: page|1,
					pageSize: $globalData.pageSize
				}).then(res => {
					if (res.code == 200) {
						this.menbersList = res.data
						setTimeout(() => {
							this.selectTables()
						}, 100)
					}
				})
			},
			deleteMenbers(row) {
				// 移除成员
				this.$confirm('确定移除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.get(this.$api.removeExpertMember, {
						id: row.id
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('移除成功')
							if (this.queryData.page > 1) {
								this.queryData.page = Math.ceil((this.pageData.totalNum - 1) / $globalData.pageSize)
							}
							this.getMenbersList()
							this.$parent.$refs.specialistGroupList.getExpertGroupList()
						}
					})
				})
			},
			rowSelect(selection, row) {
				// 单选某一行时的函数
				if (this.dialogSelectData.has(row.userId)) {
					this.dialogSelectData.delete(row.userId)
				} else {
					this.dialogSelectData.set(row.userId, row)
				}
			},
			handleSelectionChange(e) {
				// 表格选中数据
				e.forEach((v) => {
					this.dialogSelectData.set(v.userId, v)
				})
			},
			selectTables() {
				// 初始化表格选中状态
				this.menbersList.items.forEach((v, i) => {
					if (this.dialogSelectData.has(v.userId)) {
						this.$refs.multipleTable.toggleRowSelection(v)
					}
				})
				this.$forceUpdate()
			},
		}
	}
</script>

<style scoped="scoped">
	/* .breadcrumb,
	.tableNavBox {
		padding: 20px;
	} */

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		/* margin-bottom: 20px; */
		/* margin-top: 20px; */
	}

	.topButton {
		width: 78px;
	}
</style>
